<template>
	<!-- 瓦斯 -->
	<div class="flex-col h100">
		<my-box class="f1 h0" title="近24小时抽采负压">
			<my-echarts :options="options" class="h100" />
		</my-box>
		<my-box class="f1 h0 m-t-10" title="近一个月瓦斯泵累计运行时常">
			<my-echarts :options="options1" class="h100" />
		</my-box>
		<my-box class="f1 h0 m-t-10" title="瓦斯泵状态">
			<my-table
				:columns="[
					{
						label: '名称',
						prop: 'pumpName'
					},
					{
						label: '运行状态',
						prop: 'RunningState',
						align: 'center'
					},
					{
						label: '负压',
						prop: 'pressure'
					}
				]"
				:data="data3"
			>
				<template #RunningState="{ row }">
					<span class="st" :style="{ 'background-color': row.RunningState == 0 ? '#3AB973' : '#E76060' }"></span
				></template>
				<template #pressure="{ row }"> {{ row.pressure }} KPa</template>
			</my-table>
		</my-box>
	</div>
</template>

<script setup>
import { dailyPressure, gasOverviewTimeCount, pumpState } from '@a/home'

let options = computed(() => {
	let series = []
	data1.value?.pumpName?.forEach((item, i) => {
		series.push({
			type: 'line',
			name: item,
			smooth: true,
			data: data1.value.pressureCount[i]
		})
	})
	return {
		backgroundColor: 'transparent',
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(3, 15, 39, 0.8);',
			borderWidth: 2,
			borderColor: ' rgba(76, 107, 209, 0.5)'
		},
		legend: {
			textStyle: {
				color: '#fff'
			}
		},
		grid: {
			bottom: 30,
			left: 30,
			right: 20
		},
		yAxis: {
			type: 'value',
			name: 'KPa',
			splitNumber: 2,
			min: 'dataMin',
			max: 'dataMax',
			axisLabel: {
				color: '#fff', // x轴颜色
				fontSize: 14
			},
			nameTextStyle: {
				color: '#fff',
				fontSize: 12
			},
			splitLine: {
				show: true,
				lineStyle: { type: 'dashed', color: 'rgba(255, 255, 255,0.5)' }
			},
			axisTick: {
				show: false
			}
		},
		xAxis: {
			axisLabel: {
				color: '#fff', // x轴颜色
				fontSize: 14,
				showMaxLabel: true,
				showMinLabel: true
			},
			data: data1.value.time
		},
		series
	}
})
let options1 = computed(() => {
	const colorArr = ['#3AB973', '#4C6BD1', '#5D39FD', '#FCAE39']

	let data = []
	data2.value?.runningTimeCount?.forEach((value, i) => {
		data.push({
			value,
			itemStyle: {
				color: colorArr[i]
			}
		})
	})

	return {
		backgroundColor: 'transparent',
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(3, 15, 39, 0.8);',
			borderWidth: 2,
			borderColor: ' rgba(76, 107, 209, 0.5)'
		},
		grid: {
			bottom: 30,
			left: 40,
			right: 20,
			top: 10
		},
		yAxis: {
			type: 'value',
			name: 'h',
			splitNumber: 2,
			axisLabel: {
				color: '#fff', // x轴颜色
				fontSize: 14
			},
			nameTextStyle: {
				color: '#fff',
				fontSize: 12
			},
			splitLine: {
				show: true,
				lineStyle: { type: 'dashed', color: 'rgba(255, 255, 255,0.5)' }
			},
			axisTick: {
				show: true
			}
		},
		xAxis: {
			axisLabel: {
				color: '#fff', // x轴颜色
				fontSize: 14
			},
			data: data2.value.pumpName
		},
		series: [
			{
				type: 'bar',
				barWidth: 10,
				data
			}
		]
	}
})

// 近24小时抽采负压
let data1 = ref({})
dailyPressure().then((res) => {
	data1.value = res.data
})
// 近一个月瓦斯泵累计运行时长
let data2 = ref({})
gasOverviewTimeCount().then((res) => {
	data2.value = res.data
})
// 瓦斯泵状态
let data3 = ref([])
pumpState().then((res) => {
	data3.value = res.data
})
</script>

<style lang="scss" scoped>
.all {
	.item {
		height: 48px;
		border-radius: 2px;
		background: #030f27;
		box-sizing: border-box;
		border: 1px solid rgba(76, 107, 209, 0.5);
		box-shadow: inset 0px 0px 12px 0px #3468d8;
		&:not(:first-child) {
			margin-top: 10px;
		}
	}
}
.length {
	color: #397bfd;
	font-size: 14px;
	font-weight: bold;
	margin-left: 4px;
}
.st {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
</style>
